<!DOCTYPE html>
<html lang="en">

    <head>

        <meta charset="utf-8">
        <!---Read only section. Source panel edits to these document properties will not be persisted-->
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Customize WebVI with CSS</title>
        <!---End read only section. Additional scripts or document properties can be added outside this section-->

        <link href="ni-webvi-resource-v0/favicon.ico" type="image/x-icon" rel="icon">
<link href="ni-webvi-resource-v0/Web/dist/Styles/niBase.DeployedRun.min.css" type="text/css" rel="stylesheet">
<script src="ni-webvi-resource-v0/BrowserDetection.js" type="text/javascript" nomodule=""></script>
<script src="ni-webvi-resource-v0/DeployedRun.min.js" type="module"></script>
<script src="ni-webvi-resource-v0/VireoImport.min.js" type="module"></script>
<script src="ni-webvi-resource-v0/ResourceLoadDetection.js" defer=""></script>
<style ni-autogenerated-style-id="">
		/* Read only section. Source panel edits to the content of this style tag will not be persisted */
        [ni-control-id='2'] { --ni-background: rgba(255,255,255,1); --ni-border-width: 0px 0px 0px 0px; height: 2200px; --ni-margin: 0px 0px 0px 0px; --ni-padding: 30px 30px 30px 30px; width: 1000px; --ni-max-width: none; }
        .ni-front-panel-wrapper { min-width: 1000px; }
        [ni-control-id='3'] { --ni-border-width: 0px 0px 0px 0px; --ni-foreground-color: rgba(255,255,255,1); left: 0px; --ni-margin: 0px 0px 0px 0px; --ni-padding: 0px 0px 0px 0px; --ni-text-align-as-flex: flex-start; --ni-text-align: left; top: 228px; font-size: 27px; font-family: Segoe UI, Frutiger, Frutiger Linotype, Dejavu Sans, Helvetica Neue, Arial, sans-serif; font-style: normal; font-weight: normal; text-decoration: none; width: 1000px; height: 184px; }
        [ni-control-id='4'] { --ni-border-width: 0px 0px 0px 0px; --ni-foreground-color: rgba(255,255,255,1); left: 0px; --ni-margin: 0px 0px 0px 0px; --ni-padding: 0px 0px 0px 0px; --ni-text-align-as-flex: flex-start; --ni-text-align: left; top: 1797px; font-size: 27px; font-family: Segoe UI, Frutiger, Frutiger Linotype, Dejavu Sans, Helvetica Neue, Arial, sans-serif; font-style: normal; font-weight: normal; text-decoration: none; width: 1000px; height: 197px; }
        [ni-control-id='5'] { --ni-border-width: 0px 0px 0px 0px; --ni-foreground-color: rgba(255,255,255,1); left: 0px; --ni-margin: 0px 0px 0px 0px; --ni-padding: 0px 0px 0px 0px; --ni-text-align-as-flex: flex-start; --ni-text-align: left; top: 1093px; font-size: 27px; font-family: Segoe UI, Frutiger, Frutiger Linotype, Dejavu Sans, Helvetica Neue, Arial, sans-serif; font-style: normal; font-weight: normal; text-decoration: none; width: 1000px; height: 408px; }
        [ni-control-id='6'] { --ni-border-width: 0px 0px 0px 0px; --ni-foreground-color: rgba(255,255,255,1); left: 0px; --ni-margin: 0px 0px 0px 0px; --ni-padding: 0px 0px 0px 0px; --ni-text-align-as-flex: flex-start; --ni-text-align: left; top: 677px; font-size: 27px; font-family: Segoe UI, Frutiger, Frutiger Linotype, Dejavu Sans, Helvetica Neue, Arial, sans-serif; font-style: normal; font-weight: normal; text-decoration: none; width: 1000px; height: 168px; }
        [ni-control-id='7'] { --ni-border-width: 0px 0px 0px 0px; --ni-foreground-color: rgba(0,0,0,1); left: 0px; --ni-margin: 0px 0px 0px 0px; --ni-padding: 0px 0px 0px 0px; --ni-text-align-as-flex: center; --ni-text-align: center; top: 41px; font-size: 64px; font-family: Segoe UI, Frutiger, Frutiger Linotype, Dejavu Sans, Helvetica Neue, Arial, sans-serif; font-style: normal; font-weight: normal; text-decoration: none; width: 1000px; height: 104px; }
        [ni-control-id='8'] { --ni-border-width: 0px 0px 0px 0px; --ni-foreground-color: rgba(43,48,51,1); height: 72px; left: 450px; --ni-margin: 0px 0px 0px 0px; --ni-padding: 0px 0px 0px 0px; --ni-text-align-as-flex: flex-start; --ni-text-align: left; top: 728px; width: 42px; font-size: 12px; font-family: Segoe UI, Frutiger, Frutiger Linotype, Dejavu Sans, Helvetica Neue, Arial, sans-serif; font-style: normal; font-weight: bold; text-decoration: none; }
        [ni-control-id='10'] { --ni-border-width: 0px 0px 0px 0px; --ni-foreground-color: rgba(43,48,51,1); height: auto; left: 450px; --ni-margin: 0px 0px 0px 0px; --ni-padding: 0px 0px 0px 0px; top: 708px; width: auto; font-size: 12px; font-family: Segoe UI, Frutiger, Frutiger Linotype, Dejavu Sans, Helvetica Neue, Arial, sans-serif; font-style: normal; font-weight: normal; text-decoration: none; }
        [ni-control-id='9'] { --ni-border-width: 0px 0px 0px 0px; --ni-foreground-color: rgba(43,48,51,1); height: 72px; left: 370px; --ni-margin: 0px 0px 0px 0px; --ni-padding: 0px 0px 0px 0px; top: 920px; width: 232px; font-size: 12px; font-family: Segoe UI, Frutiger, Frutiger Linotype, Dejavu Sans, Helvetica Neue, Arial, sans-serif; font-style: normal; font-weight: normal; text-decoration: none; }
        [ni-control-id='12'] { --ni-border-width: 0px 0px 0px 0px; --ni-foreground-color: rgba(255,255,255,1); height: auto; left: 370px; --ni-margin: 0px 0px 0px 0px; --ni-padding: 0px 0px 0px 0px; top: 900px; width: auto; font-size: 12px; font-family: Segoe UI, Frutiger, Frutiger Linotype, Dejavu Sans, Helvetica Neue, Arial, sans-serif; font-style: normal; font-weight: normal; text-decoration: none; }
        [ni-control-id='11'] { --ni-border-width: 0px 0px 0px 0px; height: 136px; left: 418px; --ni-margin: 0px 0px 0px 0px; --ni-padding: 0px 0px 0px 0px; top: 1178px; width: 136px; }
        [ni-control-id='14'] { --ni-border-width: 0px 0px 0px 0px; --ni-foreground-color: rgba(43,48,51,1); height: auto; left: 418px; --ni-margin: 0px 0px 0px 0px; --ni-padding: 0px 0px 0px 0px; top: 1158px; width: auto; font-size: 12px; font-family: Segoe UI, Frutiger, Frutiger Linotype, Dejavu Sans, Helvetica Neue, Arial, sans-serif; font-style: normal; font-weight: normal; text-decoration: none; }
        [ni-control-id='13'] { --ni-border-width: 0px 0px 0px 0px; --ni-foreground-color: rgba(43,48,51,1); height: 72px; left: 450px; --ni-margin: 0px 0px 0px 0px; --ni-padding: 0px 0px 0px 0px; --ni-text-align-as-flex: flex-start; --ni-text-align: left; top: 1210px; width: 72px; font-size: 12px; font-family: Segoe UI, Frutiger, Frutiger Linotype, Dejavu Sans, Helvetica Neue, Arial, sans-serif; font-style: normal; font-weight: normal; text-decoration: none; }
        [ni-control-id='16'] { --ni-border-width: 0px 0px 0px 0px; --ni-foreground-color: rgba(43,48,51,1); height: auto; left: 450px; --ni-margin: 0px 0px 0px 0px; --ni-padding: 0px 0px 0px 0px; top: 1190px; width: auto; font-size: 12px; font-family: Segoe UI, Frutiger, Frutiger Linotype, Dejavu Sans, Helvetica Neue, Arial, sans-serif; font-style: normal; font-weight: normal; text-decoration: none; }
        [ni-control-id='15'] { --ni-border-width: 0px 0px 0px 0px; --ni-foreground-color: rgba(43,48,51,1); height: 296px; left: 292px; --ni-margin: 0px 0px 0px 0px; --ni-padding: 0px 0px 0px 0px; top: 1509px; width: 344px; font-size: 12px; font-family: Segoe UI, Frutiger, Frutiger Linotype, Dejavu Sans, Helvetica Neue, Arial, sans-serif; font-style: normal; font-weight: normal; text-decoration: none; }
        [ni-control-id='23'] { font-size: 12px; font-family: Segoe UI, Frutiger, Frutiger Linotype, Dejavu Sans, Helvetica Neue, Arial, sans-serif; font-style: normal; font-weight: normal; text-decoration: none; }
        [ni-control-id='24'] { font-size: 12px; font-family: Segoe UI, Frutiger, Frutiger Linotype, Dejavu Sans, Helvetica Neue, Arial, sans-serif; font-style: normal; font-weight: normal; text-decoration: none; }
        [ni-control-id='25'] { font-size: 12px; font-family: Segoe UI, Frutiger, Frutiger Linotype, Dejavu Sans, Helvetica Neue, Arial, sans-serif; font-style: normal; font-weight: normal; text-decoration: none; }
        [ni-control-id='19'] { --ni-border-width: 0px 0px 0px 0px; --ni-foreground-color: rgba(43,48,51,1); height: 60px; left: 635px; --ni-margin: 0px 0px 0px 0px; --ni-padding: 0px 0px 0px 0px; top: 1743px; width: 145px; font-size: 12px; font-family: Segoe UI, Frutiger, Frutiger Linotype, Dejavu Sans, Helvetica Neue, Arial, sans-serif; font-style: normal; font-weight: normal; text-decoration: none; }
        [ni-control-id='20'] { --ni-border-width: 0px 0px 0px 0px; --ni-foreground-color: rgba(43,48,51,1); height: 28px; left: 635px; --ni-margin: 0px 0px 0px 0px; --ni-padding: 0px 0px 0px 0px; top: 1509px; width: 145px; font-size: 12px; font-family: Segoe UI, Frutiger, Frutiger Linotype, Dejavu Sans, Helvetica Neue, Arial, sans-serif; font-style: normal; font-weight: normal; text-decoration: none; }
        [ni-control-id='21'] { --ni-border-width: 0px 0px 0px 0px; --ni-foreground-color: rgba(43,48,51,1); height: 202px; left: 292px; --ni-margin: 0px 0px 0px 0px; --ni-padding: 0px 0px 0px 0px; top: 1804px; width: 320px; font-size: 12px; font-family: Segoe UI, Frutiger, Frutiger Linotype, Dejavu Sans, Helvetica Neue, Arial, sans-serif; font-style: normal; font-weight: normal; text-decoration: none; }
        [ni-control-id='22'] { --ni-border-width: 0px 0px 0px 0px; --ni-foreground-color: rgba(43,48,51,1); height: 30px; left: 294px; --ni-margin: 0px 0px 0px 0px; --ni-padding: 0px 0px 0px 0px; top: 1511px; width: 120px; font-size: 12px; font-family: Segoe UI, Frutiger, Frutiger Linotype, Dejavu Sans, Helvetica Neue, Arial, sans-serif; font-style: normal; font-weight: normal; text-decoration: none; }
        [ni-control-id='18'] { --ni-border-width: 0px 0px 0px 0px; --ni-foreground-color: rgba(43,48,51,1); height: auto; left: 292px; --ni-margin: 0px 0px 0px 0px; --ni-padding: 0px 0px 0px 0px; top: 1489px; width: auto; font-size: 12px; font-family: Segoe UI, Frutiger, Frutiger Linotype, Dejavu Sans, Helvetica Neue, Arial, sans-serif; font-style: normal; font-weight: normal; text-decoration: none; }
        [ni-control-id='17'] { --ni-border-width: 0px 0px 0px 0px; --ni-foreground-color: rgba(43,48,51,1); height: 152px; left: 418px; --ni-margin: 0px 0px 0px 0px; --ni-padding: 0px 0px 0px 0px; top: 1842px; width: 136px; font-size: 12px; font-family: Segoe UI, Frutiger, Frutiger Linotype, Dejavu Sans, Helvetica Neue, Arial, sans-serif; font-style: normal; font-weight: normal; text-decoration: none; }
        [ni-control-id='28'] { --ni-border-width: 0px 0px 0px 0px; --ni-foreground-color: rgba(43,48,51,1); height: auto; left: 418px; --ni-margin: 0px 0px 0px 0px; --ni-padding: 0px 0px 0px 0px; top: 1822px; width: auto; font-size: 12px; font-family: Segoe UI, Frutiger, Frutiger Linotype, Dejavu Sans, Helvetica Neue, Arial, sans-serif; font-style: normal; font-weight: normal; text-decoration: none; }
        [ni-control-id='27'] { --ni-border-width: 0px 0px 0px 0px; --ni-foreground-color: rgba(43,48,51,1); height: 24px; left: 468px; --ni-margin: 0px 0px 0px 0px; --ni-padding: 0px 0px 0px 0px; --ni-text-align-as-flex: flex-end; --ni-text-align: right; top: 2083px; width: 100px; font-size: 19px; font-family: Segoe UI, Frutiger, Frutiger Linotype, Dejavu Sans, Helvetica Neue, Arial, sans-serif; font-style: normal; font-weight: normal; text-decoration: none; }
        [ni-control-id='30'] { --ni-border-width: 0px 0px 0px 0px; --ni-foreground-color: rgba(43,48,51,1); height: auto; left: 331px; --ni-margin: 0px 0px 0px 0px; --ni-padding: 0px 0px 0px 0px; top: 2083px; width: auto; font-size: 19px; font-family: Segoe UI, Frutiger, Frutiger Linotype, Dejavu Sans, Helvetica Neue, Arial, sans-serif; font-style: normal; font-weight: normal; text-decoration: none; }
        [ni-control-id='29'] { --ni-border-width: 0px 0px 0px 0px; --ni-foreground-color: rgba(43,48,51,1); height: 24px; left: 480px; --ni-margin: 0px 0px 0px 0px; --ni-padding: 0px 0px 0px 0px; --ni-text-align-as-flex: flex-end; --ni-text-align: right; top: 2117px; width: 88px; font-size: 19px; font-family: Segoe UI, Frutiger, Frutiger Linotype, Dejavu Sans, Helvetica Neue, Arial, sans-serif; font-style: normal; font-weight: normal; text-decoration: none; }
        [ni-control-id='32'] { --ni-border-width: 0px 0px 0px 0px; --ni-foreground-color: rgba(43,48,51,1); height: auto; left: 360px; --ni-margin: 0px 0px 0px 0px; --ni-padding: 0px 0px 0px 0px; top: 2117px; width: auto; font-size: 19px; font-family: Segoe UI, Frutiger, Frutiger Linotype, Dejavu Sans, Helvetica Neue, Arial, sans-serif; font-style: normal; font-weight: normal; text-decoration: none; }
        [ni-control-id='31'] { --ni-border-width: 0px 0px 0px 0px; --ni-foreground-color: rgba(255,255,255,1); left: 52px; --ni-margin: 0px 0px 0px 0px; --ni-padding: 0px 0px 0px 0px; --ni-text-align-as-flex: flex-start; --ni-text-align: left; top: 568px; font-size: 12px; font-family: Courier New, Courier, Lucida Sans Typewriter, Lucida Typewriter, monospace; font-style: normal; font-weight: normal; text-decoration: none; width: 392px; height: 88px; }
        [ni-control-id='33'] { --ni-border-width: 0px 0px 0px 0px; --ni-foreground-color: rgba(38,38,38,1); left: 642px; --ni-margin: 0px 0px 0px 0px; --ni-padding: 0px 0px 0px 0px; --ni-text-align-as-flex: flex-start; --ni-text-align: left; top: 1157px; font-size: 12px; font-family: Courier New, Courier, Lucida Sans Typewriter, Lucida Typewriter, monospace; font-style: normal; font-weight: normal; text-decoration: none; width: 312px; height: 328px; }
        [ni-control-id='34'] { --ni-border-width: 0px 0px 0px 0px; --ni-foreground-color: rgba(255,255,255,1); left: 657px; --ni-margin: 0px 0px 0px 0px; --ni-padding: 0px 0px 0px 0px; --ni-text-align-as-flex: flex-start; --ni-text-align: left; top: 1541px; font-size: 12px; font-family: Courier New, Courier, Lucida Sans Typewriter, Lucida Typewriter, monospace; font-style: normal; font-weight: normal; text-decoration: none; width: 315px; height: 232px; }
        [ni-control-id='35'] { --ni-border-width: 0px 0px 0px 0px; --ni-foreground-color: rgba(255,255,255,1); left: 612px; --ni-margin: 0px 0px 0px 0px; --ni-padding: 0px 0px 0px 0px; --ni-text-align-as-flex: flex-start; --ni-text-align: left; top: 2069px; font-size: 12px; font-family: Courier New, Courier, Lucida Sans Typewriter, Lucida Typewriter, monospace; font-style: normal; font-weight: normal; text-decoration: none; width: 388px; height: 88px; }
        [ni-control-id='36'] { --ni-border-width: 0px 0px 0px 0px; --ni-foreground-color: rgba(255,255,255,1); left: 532px; --ni-margin: 0px 0px 0px 0px; --ni-padding: 0px 0px 0px 0px; --ni-text-align-as-flex: flex-start; --ni-text-align: left; top: 452px; font-size: 13px; font-family: Segoe UI, Frutiger, Frutiger Linotype, Dejavu Sans, Helvetica Neue, Arial, sans-serif; font-style: normal; font-weight: normal; text-decoration: none; width: 408px; height: 88px; }
        [ni-control-id='37'] { --ni-border-width: 0px 0px 0px 0px; --ni-foreground-color: rgba(0,0,0,1); left: 102px; --ni-margin: 0px 0px 0px 0px; --ni-padding: 0px 0px 0px 0px; --ni-text-align-as-flex: flex-start; --ni-text-align: left; top: 709px; font-size: 13px; font-family: Segoe UI, Frutiger, Frutiger Linotype, Dejavu Sans, Helvetica Neue, Arial, sans-serif; font-style: normal; font-weight: normal; text-decoration: none; width: 197px; height: 91px; }
        [ni-control-id='38'] { --ni-border-width: 0px 0px 0px 0px; --ni-foreground-color: rgba(255,255,255,1); left: 102px; --ni-margin: 0px 0px 0px 0px; --ni-padding: 0px 0px 0px 0px; --ni-text-align-as-flex: flex-start; --ni-text-align: left; top: 901px; font-size: 13px; font-family: Segoe UI, Frutiger, Frutiger Linotype, Dejavu Sans, Helvetica Neue, Arial, sans-serif; font-style: normal; font-weight: normal; text-decoration: none; width: 197px; height: 91px; }
        [ni-control-id='39'] { --ni-border-width: 0px 0px 0px 0px; --ni-foreground-color: rgba(0,0,0,1); left: 102px; --ni-margin: 0px 0px 0px 0px; --ni-padding: 0px 0px 0px 0px; --ni-text-align-as-flex: flex-start; --ni-text-align: left; top: 1243px; font-size: 13px; font-family: Segoe UI, Frutiger, Frutiger Linotype, Dejavu Sans, Helvetica Neue, Arial, sans-serif; font-style: normal; font-weight: normal; text-decoration: none; width: 197px; height: 91px; }
        [ni-control-id='40'] { --ni-border-width: 0px 0px 0px 0px; --ni-foreground-color: rgba(0,0,0,1); left: 102px; --ni-margin: 0px 0px 0px 0px; --ni-padding: 0px 0px 0px 0px; --ni-text-align-as-flex: flex-start; --ni-text-align: left; top: 1893px; font-size: 13px; font-family: Segoe UI, Frutiger, Frutiger Linotype, Dejavu Sans, Helvetica Neue, Arial, sans-serif; font-style: normal; font-weight: normal; text-decoration: none; width: 197px; height: 40px; }
        [ni-control-id='41'] { --ni-border-width: 0px 0px 0px 0px; --ni-foreground-color: rgba(255,255,255,1); left: 102px; --ni-margin: 0px 0px 0px 0px; --ni-padding: 0px 0px 0px 0px; --ni-text-align-as-flex: flex-start; --ni-text-align: left; top: 1650px; font-size: 13px; font-family: Segoe UI, Frutiger, Frutiger Linotype, Dejavu Sans, Helvetica Neue, Arial, sans-serif; font-style: normal; font-weight: normal; text-decoration: none; width: 197px; height: 91px; }
        [ni-control-id='42'] { --ni-border-width: 0px 0px 0px 0px; --ni-foreground-color: rgba(255,255,255,1); left: 100px; --ni-margin: 0px 0px 0px 0px; --ni-padding: 0px 0px 0px 0px; --ni-text-align-as-flex: flex-start; --ni-text-align: left; top: 2085px; font-size: 13px; font-family: Segoe UI, Frutiger, Frutiger Linotype, Dejavu Sans, Helvetica Neue, Arial, sans-serif; font-style: normal; font-weight: normal; text-decoration: none; width: 200px; height: 72px; }
        [ni-control-id='43'] { --ni-border-width: 0px 0px 0px 0px; --ni-foreground-color: rgba(0,0,0,1); left: 20px; --ni-margin: 0px 0px 0px 0px; --ni-padding: 0px 0px 0px 0px; --ni-text-align-as-flex: flex-start; --ni-text-align: left; top: 244px; font-size: 19px; font-family: Segoe UI, Frutiger, Frutiger Linotype, Dejavu Sans, Helvetica Neue, Arial, sans-serif; font-style: normal; font-weight: normal; text-decoration: none; width: 279px; height: 88px; }
        [ni-control-id='44'] { --ni-border-width: 0px 0px 0px 0px; --ni-foreground-color: rgba(43,48,51,1); left: 596px; --ni-margin: 0px 0px 0px 0px; --ni-padding: 0px 0px 0px 0px; --ni-text-align-as-flex: flex-start; --ni-text-align: left; top: 709px; font-size: 12px; font-family: Courier New, Courier, Lucida Sans Typewriter, Lucida Typewriter, monospace; font-style: normal; font-weight: normal; text-decoration: none; width: 374px; height: 91px; }
        [ni-control-id='45'] { --ni-border-width: 0px 0px 0px 0px; --ni-foreground-color: rgba(255,255,255,1); left: 642px; --ni-margin: 0px 0px 0px 0px; --ni-padding: 0px 0px 0px 0px; --ni-text-align-as-flex: flex-start; --ni-text-align: left; top: 870px; font-size: 12px; font-family: Courier New, Courier, Lucida Sans Typewriter, Lucida Typewriter, monospace; font-style: normal; font-weight: normal; text-decoration: none; width: 328px; height: 216px; }
        [ni-control-id='46'] { --ni-border-width: 0px 0px 0px 0px; --ni-foreground-color: rgba(0,0,0,1); left: 628px; --ni-margin: 0px 0px 0px 0px; --ni-padding: 0px 0px 0px 0px; --ni-text-align-as-flex: flex-start; --ni-text-align: left; top: 1893px; font-size: 12px; font-family: Courier New, Courier, Lucida Sans Typewriter, Lucida Typewriter, monospace; font-style: normal; font-weight: normal; text-decoration: none; width: 360px; height: 72px; }
        [ni-control-id='47'] { --ni-border-width: 0px 0px 0px 0px; --ni-foreground-color: rgba(255,255,255,1); height: 47px; left: 20px; --ni-margin: 0px 0px 0px 0px; --ni-padding: 0px 0px 0px 0px; --ni-text-align-as-flex: flex-start; --ni-text-align: left; top: 148px; width: 712px; font-size: 21px; font-family: Segoe UI, Frutiger, Frutiger Linotype, Dejavu Sans, Helvetica Neue, Arial, sans-serif; font-style: normal; font-weight: normal; text-decoration: none; }
        [ni-control-id='49'] { --ni-border-width: 0px 0px 0px 0px; --ni-foreground-color: rgba(43,48,51,1); height: auto; left: 20px; --ni-margin: 0px 0px 0px 0px; --ni-padding: 0px 0px 0px 0px; top: 128px; width: auto; font-size: 12px; font-family: Segoe UI, Frutiger, Frutiger Linotype, Dejavu Sans, Helvetica Neue, Arial, sans-serif; font-style: normal; font-weight: normal; text-decoration: none; }
        [ni-control-id='48'] { --ni-border-width: 0px 0px 0px 0px; --ni-foreground-color: rgba(255,255,255,1); left: 340px; --ni-margin: 0px 0px 0px 0px; --ni-padding: 0px 0px 0px 0px; --ni-text-align-as-flex: flex-start; --ni-text-align: left; top: 2083px; font-size: 19px; font-family: Segoe UI, Frutiger, Frutiger Linotype, Dejavu Sans, Helvetica Neue, Arial, sans-serif; font-style: normal; font-weight: normal; text-decoration: none; width: auto; height: auto; }
        [ni-control-id='50'] { --ni-border-width: 0px 0px 0px 0px; --ni-foreground-color: rgba(255,255,255,1); left: 340px; --ni-margin: 0px 0px 0px 0px; --ni-padding: 0px 0px 0px 0px; --ni-text-align-as-flex: flex-start; --ni-text-align: left; top: 2117px; font-size: 19px; font-family: Segoe UI, Frutiger, Frutiger Linotype, Dejavu Sans, Helvetica Neue, Arial, sans-serif; font-style: normal; font-weight: normal; text-decoration: none; width: auto; height: auto; }
        [ni-control-id='51'] { --ni-border-width: 0px 0px 0px 0px; height: 136px; left: 418px; --ni-margin: 0px 0px 0px 0px; --ni-padding: 0px 0px 0px 0px; top: 1349px; width: 136px; }
        [ni-control-id='53'] { --ni-border-width: 0px 0px 0px 0px; --ni-foreground-color: rgba(43,48,51,1); height: auto; left: 418px; --ni-margin: 0px 0px 0px 0px; --ni-padding: 0px 0px 0px 0px; top: 1329px; width: auto; font-size: 12px; font-family: Segoe UI, Frutiger, Frutiger Linotype, Dejavu Sans, Helvetica Neue, Arial, sans-serif; font-style: normal; font-weight: normal; text-decoration: none; }
        [ni-control-id='52'] { --ni-border-width: 0px 0px 0px 0px; --ni-foreground-color: rgba(43,48,51,1); height: 72px; left: 450px; --ni-margin: 0px 0px 0px 0px; --ni-padding: 0px 0px 0px 0px; --ni-text-align-as-flex: flex-start; --ni-text-align: left; top: 1381px; width: 72px; font-size: 12px; font-family: Segoe UI, Frutiger, Frutiger Linotype, Dejavu Sans, Helvetica Neue, Arial, sans-serif; font-style: normal; font-weight: normal; text-decoration: none; }
        [ni-control-id='55'] { --ni-border-width: 0px 0px 0px 0px; --ni-foreground-color: rgba(43,48,51,1); height: auto; left: 450px; --ni-margin: 0px 0px 0px 0px; --ni-padding: 0px 0px 0px 0px; top: 1361px; width: auto; font-size: 12px; font-family: Segoe UI, Frutiger, Frutiger Linotype, Dejavu Sans, Helvetica Neue, Arial, sans-serif; font-style: normal; font-weight: normal; text-decoration: none; }
        [ni-control-id='54'] { --ni-border-width: 0px 0px 0px 0px; --ni-foreground-color: rgba(0,0,0,1); left: 102px; --ni-margin: 0px 0px 0px 0px; --ni-padding: 0px 0px 0px 0px; --ni-text-align-as-flex: flex-start; --ni-text-align: left; top: 1381px; font-size: 13px; font-family: Segoe UI, Frutiger, Frutiger Linotype, Dejavu Sans, Helvetica Neue, Arial, sans-serif; font-style: normal; font-weight: normal; text-decoration: none; width: 197px; height: 91px; }
        [ni-control-id='56'] { --ni-border-width: 0px 0px 0px 0px; --ni-foreground-color: rgba(0,0,0,1); left: 38px; --ni-margin: 0px 0px 0px 0px; --ni-padding: 0px 0px 0px 0px; --ni-text-align-as-flex: flex-start; --ni-text-align: left; top: 1109px; font-size: 15px; font-family: Segoe UI, Frutiger, Frutiger Linotype, Dejavu Sans, Helvetica Neue, Arial, sans-serif; font-style: normal; font-weight: normal; text-decoration: none; width: 872px; height: 40px; }
        [ni-control-id='57'] { --ni-border-width: 0px 0px 0px 0px; --ni-foreground-color: rgba(255,255,255,1); left: 596px; --ni-margin: 0px 0px 0px 0px; --ni-padding: 0px 0px 0px 0px; --ni-text-align-as-flex: flex-start; --ni-text-align: left; top: 568px; font-size: 12px; font-family: Courier New, Courier, Lucida Sans Typewriter, Lucida Typewriter, monospace; font-style: normal; font-weight: normal; text-decoration: none; width: 264px; height: 48px; }
        [ni-control-id='58'] { --ni-border-width: 0px 0px 0px 0px; --ni-foreground-color: rgba(0,0,0,1); left: 640px; --ni-margin: 0px 0px 0px 0px; --ni-padding: 0px 0px 0px 0px; --ni-text-align-as-flex: flex-start; --ni-text-align: left; top: 356px; font-size: 12px; font-family: Courier New, Courier, Lucida Sans Typewriter, Lucida Typewriter, monospace; font-style: normal; font-weight: normal; text-decoration: none; width: 360px; height: 24px; }
        [ni-control-id='59'] { --ni-border-width: 0px 0px 0px 0px; --ni-foreground-color: rgba(0,0,0,1); left: 672px; --ni-margin: 0px 0px 0px 0px; --ni-padding: 0px 0px 0px 0px; --ni-text-align-as-flex: flex-start; --ni-text-align: left; top: 244px; font-size: 13px; font-family: Segoe UI, Frutiger, Frutiger Linotype, Dejavu Sans, Helvetica Neue, Arial, sans-serif; font-style: normal; font-weight: normal; text-decoration: none; width: 296px; height: 104px; }
        [ni-control-id='60'] { --ni-border-width: 0px 0px 0px 0px; --ni-foreground-color: rgba(0,0,0,1); left: 338px; --ni-margin: 0px 0px 0px 0px; --ni-padding: 0px 0px 0px 0px; --ni-text-align-as-flex: flex-start; --ni-text-align: left; top: 244px; font-size: 13px; font-family: Segoe UI, Frutiger, Frutiger Linotype, Dejavu Sans, Helvetica Neue, Arial, sans-serif; font-style: normal; font-weight: normal; text-decoration: none; width: 280px; height: 168px; }
        [ni-control-id='61'] { --ni-border-width: 0px 0px 0px 0px; --ni-foreground-color: rgba(255,255,255,1); left: 164px; --ni-margin: 0px 0px 0px 0px; --ni-padding: 0px 0px 0px 0px; --ni-text-align-as-flex: flex-start; --ni-text-align: left; top: 452px; font-size: 13px; font-family: Segoe UI, Frutiger, Frutiger Linotype, Dejavu Sans, Helvetica Neue, Arial, sans-serif; font-style: normal; font-weight: normal; text-decoration: none; width: 216px; height: 56px; }
        [ni-control-id='62'] { --ni-border-width: 0px 0px 0px 0px; --ni-foreground-color: rgba(0,0,0,1); left: 102px; --ni-margin: 0px 0px 0px 0px; --ni-padding: 0px 0px 0px 0px; --ni-text-align-as-flex: flex-start; --ni-text-align: left; top: 1160px; font-size: 13px; font-family: Segoe UI, Frutiger, Frutiger Linotype, Dejavu Sans, Helvetica Neue, Arial, sans-serif; font-style: normal; font-weight: normal; text-decoration: none; width: 197px; height: 56px; }
		/* End read only section. To add additional styles, add a new style tag after this one. */</style>
        
        <link href="support/style.css" rel="stylesheet">

    
</head>

    <body><ni-web-application location="BROWSER" engine="VIREO" vireo-source="index.via.txt" wasm-url="ni-webvi-resource-v0/node_modules/vireo/dist/wasm32-unknown-emscripten/release/vireo.core.wasm"><ni-virtual-instrument vi-name="WebApp::index.gviweb"></ni-virtual-instrument></ni-web-application>
        <div id="ni-outdated-browser-message" style="display:none">This browser is missing features needed to run this web application. Open this web application in a supported browser.</div>
        <div id="ni-failed-to-load-vireo-source" style="display:none">Unable to load required dependencies. Please verify all WebVI files are available and served using an http server or use a browser that can load files directly from the filesystem.</div>

        <div class="ni-front-panel-wrapper" vi-ref="" ni-control-id="FrontPanelWrapper">
            <ni-front-panel control-resize-mode='fixed' layout='absolute' ni-control-id='2'>

                

                

                

                

                

                

                

                

                

                

                

                

                

                

                

                

                

                

                

                

                

                

                

                

                

                

                

                

                

                

                

                

                

                

                

                

                

                

                

                

                

                

                

                

                

                

                

                

                

                

                

                

            
            <ni-text class='example-section' control-resize-mode='fixed' ni-control-id='3' text='-'></ni-text>
            <ni-text class='example-section' control-resize-mode='fixed' ni-control-id='4' text='-'></ni-text>
            <ni-text class='example-section' control-resize-mode='fixed' ni-control-id='5' text='-'></ni-text>
            <ni-text class='example-section' control-resize-mode='fixed' ni-control-id='6' text='-'></ni-text>
            <ni-text class='example-section' control-resize-mode='fixed' ni-control-id='7' text='Customize with CSS'></ni-text>
            <jqx-switch-button binding-info='{"accessMode": "readOnly", "dataItem": "dataItem_Multiplier", "dco": 0, "isLatched": false, "prop": "value", "sync": false, "unplacedOrDisabled": false}' checked='true' click-mode='release' control-resize-mode='fixed' false-content='1x' follower-ids='["10"]' label-alignment='top-left' label-id='10' ni-control-id='8' orientation='vertical' switch-mode='click' true-content='10x'></jqx-switch-button>
            <ni-label control-resize-mode='fixed' label-alignment='top-left' ni-control-id='10' text='Multiplier'></ni-label>
            <jqx-slider class='custom-style' binding-info='{"accessMode": "readOnly", "dataItem": "dataItem_MainFillLevel", "dco": 1, "isLatched": false, "prop": "value", "sync": false, "unplacedOrDisabled": false}' control-resize-mode='fixed' follower-ids='["12"]' format='decimal' interval='1' label-alignment='top-left' label-id='12' labels-visibility='all' max='10' mechanical-action='switchWhileDragging' min='0' ni-control-id='9' ni-type='Double' orientation='horizontal' scale-position='far' significant-digits='6' ticks-visibility='minor' validation='interaction' value='1.5865384615384617'></jqx-slider>
            <ni-label control-resize-mode='fixed' label-alignment='top-left' ni-control-id='12' text='Main Fill Level'></ni-label>
            <jqx-circular-progress-bar class='activation-progress warning' binding-info='{"accessMode": "writeOnly", "dataItem": "dataItem_StartFilling1", "dco": 2, "isLatched": false, "prop": "value", "sync": false, "unplacedOrDisabled": false}' control-resize-mode='fixed' follower-ids='["14"]' label-alignment='top-left' label-id='14' max='100' min='0' ni-control-id='11' read-only='true' value='5.8933385784397476'></jqx-circular-progress-bar>
            <ni-label control-resize-mode='fixed' label-alignment='top-left' ni-control-id='14' text='Start Filling 1'></ni-label>
            <jqx-power-button class='activation-button warning' binding-info='{"accessMode": "readOnly", "dataItem": "dataItem_PowerButton", "dco": 3, "isLatched": false, "prop": "value", "sync": false, "unplacedOrDisabled": false}' checked='true' click-mode='release' control-resize-mode='fixed' false-content='' follower-ids='["16"]' label-alignment='top-left' label-id='16' ni-control-id='13' orientation='horizontal' switch-mode='click' true-content=''></jqx-power-button>
            <ni-label class='ni-hidden' control-resize-mode='fixed' label-alignment='top-left' ni-control-id='16' text='Power Button'></ni-label>
            <ni-cartesian-graph binding-info='{"accessMode": "writeOnly", "dataItem": "dataItem_Graph", "dco": 4, "isLatched": false, "prop": "value", "sync": false, "unplacedOrDisabled": false}' control-resize-mode='resize-horizontally' follower-ids='["19", "20", "21", "22", "18"]' label-alignment='top-left' label-id='18' ni-control-id='15' ni-type='{"name": "Array", "rank": 2, "subtype": "Double"}' plot-area-margin='{"bottom": 0, "left": 0, "right": 0, "top": 0}' read-only='true' value='[]'>
                <ni-cartesian-axis auto-scale='exact' axis-position='bottom' format='LVRelativeSeconds:G6&gt;&gt;0.000E+0' grid-lines='true' label='Time' maximum='100' minimum='0' ni-control-id='23' show='true' show-label='true' show-minor-ticks='true' show-tick-labels='all' show-ticks='true' time-format-epoch='-2082844800000'></ni-cartesian-axis>
                <ni-cartesian-axis auto-scale='loose' axis-position='left' format='LVRelativeSeconds:G6&gt;&gt;0.000E+0' grid-lines='true' label='Amplitude' maximum='10' minimum='0' ni-control-id='24' show='true' show-label='true' show-minor-ticks='true' show-tick-labels='all' show-ticks='true' time-format-epoch='-2082844800000'></ni-cartesian-axis>
                <ni-cartesian-plot hover-format='{0}, {1}' label='Plot' ni-control-id='25' show='true' show-label='true' xaxis='23' yaxis='24'>
                    <ni-cartesian-plot-renderer area-base-line='negativeinfinity' area-fill='' bar-base-line='negativeinfinity' bar-fill='' line-stroke='rgba(130,163,209,1)' line-style='solid' line-width='1' ni-control-id='26' point-color='' point-shape='ellipse' point-size='7.0710678118654755'></ni-cartesian-plot-renderer>
                </ni-cartesian-plot>
            </ni-cartesian-graph>
            <ni-scale-legend class='ni-hidden' control-resize-mode='fixed' graph-ref='54' ni-control-id='19'></ni-scale-legend>
            <ni-plot-legend class='ni-hidden' control-resize-mode='fixed' graph-ref='54' ni-control-id='20'></ni-plot-legend>
            <ni-cursor-legend class='ni-hidden' control-resize-mode='fixed' graph-ref='54' ni-control-id='21'></ni-cursor-legend>
            <ni-graph-tools class='ni-hidden' control-resize-mode='fixed' graph-ref='54' ni-control-id='22'></ni-graph-tools>
            <ni-label class='ni-hidden' control-resize-mode='fixed' label-alignment='top-left' ni-control-id='18' text='Graph'></ni-label>
            <jqx-tank binding-info='{"accessMode": "writeOnly", "dataItem": "dataItem_FillLevel", "dco": 5, "isLatched": false, "prop": "value", "sync": false, "unplacedOrDisabled": false}' control-resize-mode='fixed' follower-ids='["28"]' format='decimal' interval='1' label-alignment='top-left' label-id='28' labels-visibility='all' max='31' min='0' ni-control-id='17' ni-type='Double' orientation='vertical' readonly='true' scale-position='near' significant-digits='2' ticks-visibility='minor' validation='interaction' value='0'></jqx-tank>
            <ni-label control-resize-mode='fixed' label-alignment='top-left' ni-control-id='28' text='Fill Level'></ni-label>
            <jqx-numeric-text-box binding-info='{"accessMode": "writeOnly", "dataItem": "dataItem_ResidualsMean", "dco": 6, "isLatched": false, "prop": "value", "sync": false, "unplacedOrDisabled": false}' control-resize-mode='fixed' enable-mouse-wheel-action='true' follower-ids='["30"]' label-alignment='left-center' label-id='30' max='Infinity' min='-Infinity' ni-control-id='27' ni-type='Double' radix='decimal' readonly='true' significant-digits='6' spin-buttons-initial-delay='500' spin-buttons-position='right' spin-buttons-step='1' validation='interaction' value='0'></jqx-numeric-text-box>
            <ni-label class='ni-hidden' control-resize-mode='fixed' label-alignment='left-center' ni-control-id='30' text='Residuals Mean'></ni-label>
            <jqx-numeric-text-box binding-info='{"accessMode": "writeOnly", "dataItem": "dataItem_Completed", "dco": 7, "isLatched": false, "prop": "value", "sync": false, "unplacedOrDisabled": false}' control-resize-mode='fixed' enable-mouse-wheel-action='true' follower-ids='["32"]' label-alignment='left-center' label-id='32' max='Infinity' min='-Infinity' ni-control-id='29' ni-type='Double' radix='decimal' readonly='true' significant-digits='6' spin-buttons-initial-delay='500' spin-buttons-position='right' spin-buttons-step='1' validation='interaction' value='0'></jqx-numeric-text-box>
            <ni-label class='ni-hidden' control-resize-mode='fixed' label-alignment='left-center' ni-control-id='32' text='% Completed'></ni-label>
            <ni-text control-resize-mode='fixed' ni-control-id='31' text='ni-front-panel {
    background-color: #044123;
    box-shadow: 0px 0px 18px 3px rgba(0, 0, 0, 0.75);
}
'></ni-text>
            <ni-text control-resize-mode='fixed' ni-control-id='33' text='.activation-button {
    --ni-true-foreground-color: orange;
}



.activation-button.warning {
    --ni-true-background: yellow;
}

.activation-progress.warning {
    --ni-fill-background: yellow;
}



.activation-button.danger {
    --ni-true-background: red;
}

.activation-progress.danger {
    --ni-fill-background: red;
}'></ni-text>
            <ni-text control-resize-mode='fixed' ni-control-id='34' text='ni-cartesian-graph {
    background: transparent;
    border: none;
}

ni-cartesian-graph .flot-x-axis text,
ni-cartesian-graph .flot-y-axis text {
    fill: white;
}

ni-cartesian-graph text.axisLabels {
    fill: lightgray;
}'></ni-text>
            <ni-text control-resize-mode='fixed' ni-control-id='35' text='jqx-numeric-text-box {
    --ni-border: none;
    --ni-foreground-color: white !important;
    --ni-indicator-background-color: transparent;
    --ni-control-background-color: transparent;
}'></ni-text>
            <ni-text control-resize-mode='fixed' ni-control-id='36' text='Define a class for "example sections" with a white background color. 

The white sections on this page are Text elements with class "example-section" set in the HTML class attribute option on the Item tab in the configuration pane.'></ni-text>
            <ni-text control-resize-mode='fixed' ni-control-id='37' text='Set the thumb to yellow when true, including its hover (mouseover) state.'></ni-text>
            <ni-text control-resize-mode='fixed' ni-control-id='38' text='Set the track to be transparent.
Set the track fill to yellow.
Set the track labels to be white.'></ni-text>
            <ni-text control-resize-mode='fixed' ni-control-id='39' text='Set the power button to have a yellow background.
Set the circular progress bar to have a yellow fill. '></ni-text>
            <ni-text control-resize-mode='fixed' ni-control-id='40' text='Set the tank scale color to hot pink.'></ni-text>
            <ni-text control-resize-mode='fixed' ni-control-id='41' text='Make the non-plot area and the plot area transparent.
Make the axis ticks white. 
Make the axis labels light gray.'></ni-text>
            <ni-text control-resize-mode='fixed' ni-control-id='42' text='Make the numeric text white. Remove all borders and background colors. '></ni-text>
            <ni-text control-resize-mode='fixed' ni-control-id='43' text='This example demonstrates how to customize the user interface of a WebVI using CSS.'></ni-text>
            <ni-text control-resize-mode='fixed' ni-control-id='44' text='jqx-switch-button[checked] .jqx-thumb::after,
jqx-switch-button[checked]:hover .jqx-thumb::after {
    background: yellow;
}'></ni-text>
            <ni-text control-resize-mode='fixed' ni-control-id='45' text='jqx-slider .jqx-container .jqx-track::before {
    background: transparent;
    border: none;
}

jqx-slider {
    --ni-fill-background: yellow;
    --ni-foreground-color: white !important;
}
            

            '></ni-text>
            <ni-text control-resize-mode='fixed' ni-control-id='46' text='jqx-tank {
    --ni-foreground-color: hotpink !important;
}'></ni-text>
            <ni-hyperlink binding-info='{"accessMode": "readOnly", "dataItem": "dataItem_HyperlinkControl", "dco": 8, "isLatched": false, "prop": "href", "sync": false, "unplacedOrDisabled": true}' content='Learn more about this example at github.com/ni/webvi-examples' control-resize-mode='fixed' follower-ids='["49"]' href='https://github.com/ni/webvi-examples' label-alignment='top-left' label-id='49' ni-control-id='47' target='_self'></ni-hyperlink>
            <ni-label class='ni-hidden' control-resize-mode='fixed' label-alignment='top-left' ni-control-id='49' text='Hyperlink Control'></ni-label>
            <ni-text control-resize-mode='fixed' ni-control-id='48' text='Residual Mean'></ni-text>
            <ni-text control-resize-mode='fixed' ni-control-id='50' text='% Completed'></ni-text>
            <jqx-circular-progress-bar class='activation-progress danger' binding-info='{"accessMode": "writeOnly", "dataItem": "dataItem_StartFilling2", "dco": 9, "isLatched": false, "prop": "value", "sync": false, "unplacedOrDisabled": false}' control-resize-mode='fixed' follower-ids='["53"]' label-alignment='top-left' label-id='53' max='100' min='0' ni-control-id='51' read-only='true' value='5.8933385784397476'></jqx-circular-progress-bar>
            <ni-label control-resize-mode='fixed' label-alignment='top-left' ni-control-id='53' text='Start Filling 2'></ni-label>
            <jqx-power-button class='activation-button danger' binding-info='{"accessMode": "readOnly", "dataItem": "dataItem_PowerButton_2", "dco": 10, "isLatched": false, "prop": "value", "sync": false, "unplacedOrDisabled": false}' checked='true' click-mode='release' control-resize-mode='fixed' false-content='' follower-ids='["55"]' label-alignment='top-left' label-id='55' ni-control-id='52' orientation='horizontal' switch-mode='click' true-content=''></jqx-power-button>
            <ni-label class='ni-hidden' control-resize-mode='fixed' label-alignment='top-left' ni-control-id='55' text='Power Button_2'></ni-label>
            <ni-text control-resize-mode='fixed' ni-control-id='54' text='Set the power button to have a red background.
Set the circular progress bar to have a red fill. '></ni-text>
            <ni-text control-resize-mode='fixed' ni-control-id='56' text='Note: You can reference controls from CSS or JavaScript by using the HTML class attribute option on the Item tab in the configuration pane. Multiple classes must be space-delimited.'></ni-text>
            <ni-text control-resize-mode='fixed' ni-control-id='57' text='.example-section {
    background-color: white;
}'></ni-text>
            <ni-text control-resize-mode='fixed' ni-control-id='58' text='&lt;link href="support/style.css" rel="stylesheet"&gt;'></ni-text>
            <ni-text control-resize-mode='fixed' ni-control-id='59' text='The user-defined CSS for this example is available in support/style.css and is referenced from the WebVI by the following link tag added using the Edit panel HTML dialog:
'></ni-text>
            <ni-text control-resize-mode='fixed' ni-control-id='60' text='If you modify the CSS to customize the appearance of controls, these modifications may not persist from release to release.

If you modify the CSS from NI defaults, plan to test your code each time you upgrade to a new version of the G Web Development Software and make manual updates to your CSS styles if necessary.'></ni-text>
            <ni-text control-resize-mode='fixed' ni-control-id='61' text='Make the page background white. Set the panel to blue with a drop shadow. '></ni-text>
            <ni-text control-resize-mode='fixed' ni-control-id='62' text='Set the power button to have an orange foreground when true.'></ni-text>
        </ni-front-panel>
        </div>
    </body>

</html>